<script lang="ts" setup>
// 引入组件
import useStore from '@/store/index';
import banner from './components/banner.vue';
import homeCategory from './components/homeCategory.vue';
import homeNew from './components/home-new.vue';
import homeAtmosphere from './components/homeAtmosphere.vue';
import { ref } from 'vue';
import { useObserver } from '@/hooks/index';

const home = useStore().home;

// 给解构出来的target重新命名
const { target: refnew } = useObserver(home.getNewArticles, false);
const { target: refHot } = useObserver(home.getHotList, false);

// 通过 ref 获得组件实例
</script>

<template>
  <div class="home">
    <div class="left">
      <home-category></home-category>
    </div>
    <banner></banner>
  </div>
  <homeNew ref="refnew"></homeNew>
  <homeAtmosphere ref="refHot"></homeAtmosphere>
</template>

<style lang="less" scoped>
.home {
  // background-color: pink;
  height: 500px;
  position: relative;
  .left {
    width: 100%;
    height: 100%;
    z-index: 11;
    // background-color: cyan;
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>
